<template>
  <div class="header">
    <div class="navContainer">
      <div class="logo"><a href="#">网易云音乐</a></div>
      <ul class="nav">
        <li><router-link to="/home" active-class="active">发现音乐</router-link></li>
        <li><router-link to="/mymusic" active-class="active">我的音乐</router-link></li>
        <li><router-link to="/myfriend" active-class="active" >朋友</router-link></li>
        <li><a href="https://music.163.com/store/product" target="_blank">商城</a></li>
        <li><a href="https://music.163.com/st/musician" target="_blank">音乐人</a></li>
        <li>
          <router-link to="/download" active-class="active" >下载客户端</router-link>
          <div class="hot"></div>
        </li>
      </ul>
      <ul class="formContainer">
        <li class="search">
          <i class="iconfont icon-sousuo"></i>
          <input type="text" name="keyword" />
        </li>
        <li class="creator">
          <a href="javascript:;">创作者中心</a>
        </li>
        <li class="loginContainer" v-if="!loginStatus">
          <a href="javascript:;" @click="handleClickLogin">登录</a>
          <div class="login" v-show="showLogin">
            <div class="content">
              <div class="title">
                <span>登录</span>
                <span class="close" @click="handleClickClose">X</span>
              </div>
              <div class="main">
                <div>请使用网易云音乐app扫码登录</div>
                <img :src="qrImg" alt="登录二维码">
                <div><a href="javascript:;">选择其他登录模式 &gt;</a></div>
              </div>
            </div>
          </div>
        </li>
        <li class="loginContainer" v-if="loginStatus">
          <img class="avatar" title="进入主页" :src="userInfo.avatarUrl" :alt="userInfo.nickname" @click="toMyHome">
        </li>
      </ul>
    </div>
    <div class="menuContainer">
      <!-- 可以使用路由的meta对象添加一个isMenu，但是子路由太多，就没有添加 -->
      <ul class="menu" v-if="$route.path.indexOf('home') === 1">
        <li><router-link to="/home/recommend" active-class="active">推荐</router-link></li>
        <li><router-link to="/home/rink" active-class="active">排行榜</router-link></li>
        <li><router-link to="/home/songs" active-class="active">歌单</router-link></li>
        <li><router-link to="/home/radio" active-class="active">主播电台</router-link></li>
        <li><router-link to="/home/mv" active-class="active">Mv</router-link></li>
        <li><router-link to="/home/songer" active-class="active">歌手</router-link></li>
        <li><router-link to="/home/dishes" active-class="active">新碟上架</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      showLogin: false,
      qrImg: '',
      loginStatus: false,
      userInfo: {}
    }
  },
  methods: {
    async handleClickLogin () {
      this.showLogin = true
      // { withCredentials: true }（表示跨域请求时是否需要使用凭证） 这个至关重要，不然不会写上cookies
      let key = await this.$http.get(`/login/qr/key?timestamp=${Date.now()}`, { withCredentials: true })
      key = key.data.data.unikey
      const qr = await this.$http.get(`/login/qr/create?key=${key}&qrimg=${key}&timestamp=${Date.now()}`, { withCredentials: true })
      this.qrImg = qr.data.data.qrimg
      this.timer = setInterval(async () => {
        const res = await this.$http.get(`/login/qr/check?key=${key}&timestamp=${Date.now()}`, { withCredentials: true })
        const code = res.data.code
        // 800为二维码过期,801为等待扫码,802为待确认,803为授权登录成功(803状态码下会返回cookies)
        if (code === 800) {
          clearInterval(this.timer)
          window.alert('二维码已过期，请重新获取')
          this.handleClickLogin()
        }
        if (code === 803) {
          clearInterval(this.timer)
          window.alert('登录成功！！')
          this.getLoginStatus()
          this.handleClickClose()
        }
      }, 3000)
    },
    handleClickClose () {
      clearInterval(this.timer)
      this.showLogin = false
    },
    toMyHome () {
      console.log('主页')
      this.$router.push('/myhome')
    },
    async getLoginStatus () {
      const userInfo = await this.$http.get(`/login/status?timerstamp=${Date.now()}`, { withCredentials: true })
      // 将数据传入store的state中
      this.$store.commit('saveUserInfo', userInfo.data.data.profile)
      this.userInfo = userInfo.data.data.profile
      if (this.userInfo) {
        this.loginStatus = true
      }
    }
  },
  created () {
    this.getLoginStatus()
  }
}
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 60px;
  background-color: #242424;
  // border-radius: 10px 10px 0 0 ;
}

.navContainer {
  width: 1100px;
  margin: 0 auto;
  // 开启bfc;
  overflow: hidden;
  // background-color: red;
  .logo {
    float: left;
    width: 180px;
    a {
      display: block;
      text-indent: -99999px;
      width: 100%;
      height: 60px;
      background-image: url(../../assets/images/topbar.png);
      background-repeat: no-repeat;
      // background-color: aqua;
      background-position: 10px -5px;
      background-size: auto;
    }
  }
  .nav {
    li {
      float: left;
      line-height: 60px;
      a {
        display: block;
        color: #ccc;
        padding: 0 20px;
      }
      .active,
      a:hover {
        color: #e4e4e4;
        background-color: #000000;
      }
      &:last-child {
        position: relative;
        .hot {
          position: absolute;
          left: 110px;
          top: 10px;
          width: 25px;
          height: 13px;
          border-radius: 6px;
          background-color: #fff;
          background-image: url(../../assets/images/topbar.png);
          background-position: -192.5px 0;
        }
      }
    }
  }
  .formContainer {
    position: relative;
    height: 60px;
    line-height: 60px;
    float: right;
    // background-color: rosybrown;
    li {
      float: left;
    }
    .search {
      position: relative;
      margin-right: 20px;
      input {
        width: 110px;
        height: 30px;
        border: none;
        outline: none;
        border-radius: 15px;
        font-size: 16px;
        padding: 0 20px 0 30px;
      }
      .iconfont{
        position: absolute;
        font-size: 16px;
        left: 10px;
        top: 2px;
      }
    }
    .creator {
      margin-right: 20px;
      a {
        padding: 5px;
        font-size: 14px;
        border: 1px solid #cccccc;
        border-radius: 14px;
        text-align: center;
        color: #cccccc;
      }
      a:hover {
        color: #fff;
        border-color: #fff;
      }
    }
    .loginContainer {
      a {
        color: #787878;
        font-size: 14px;
      }
      a:hover {
        color: #999999;
      }
      .login{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        background-color: rgba(0, 0, 0, 0.1 );
        z-index: 99;
        .content{
          width: 600px;
          height: 400px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          background-color: #ffffff;
          border-radius: 20px;
          box-shadow: 0 5px 20px 10px  rgba(0, 0, 0, 0.6);
          overflow: hidden;
          .title{
            height: 50px;
            line-height: 50px;
            padding: 0 20px;
            overflow: hidden;
            background-color: #2d2d2d;
            color: #ffffff;
            span:not(.close){
              float: left;
            }
            .close{
              cursor: pointer;
              float: right;
              padding: 0 15px;
            }
            .close:hover{
              color: #888888;
            }
          }
          .main{
            text-align: center;
          }
        }
      }
      .avatar{
        width: 30px;
        height: 30px;
        vertical-align: middle;
        border-radius: 15px;
        border: 1px solid #eee;
        cursor: pointer;
      }
    }
  }
}

.menuContainer {
  background-color: #c20c0c;
  min-height: 4px;
  .menu {
    width: 1100px;
    margin: 0 auto;
    overflow: hidden;
    padding-left: 390px;
    li {
      padding: 5px 20px;
      float: left;
      a {
        display: block;
        font-size: 14px;
        color: #ffffff;
        padding: 2px 8px;
      }
      a:hover,
      .active {
        background-color: #9b0909;
        border-radius: 10px;
      }
    }
  }
}
</style>
